<template>
  <div>
    <el-button @click="showDrawer" type="primary">批量导入成本</el-button>


    <el-drawer
      title="批量导入成本"
      :visible.sync="drawer"
      :size="600"
    >
      <div class="drawer-box">
        <div class="drawer-template-box">
          <el-button type="primary" @click="downloadTemplate" :loading="downloadLoading">下载模板</el-button>
          <div class="template-tips">
            请先下载模板，按模板填写成本信息后上传
          </div>
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="uploadHeader"
            :show-file-list="false"
            :on-success="uploadFileSuccess"
            :before-upload="beforeUpload"
            accept=".xlsx"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将填写好的模板文件拖到此处或<em>点击上传</em></div>
          </el-upload>
        </div>

        <div class="">
          <el-table
              :data="tableData"
          >
            <el-table-column
                prop="id"
                label="ID"
                width="100"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="fileName"
                :label="$t('stock.file')"
                min-width="150"
            >
              <template slot-scope="{row}">
                <a :href="row.excelPath" target="_blank" class="font-blue">{{row.fileName}}</a>
              </template>
            </el-table-column>
            <el-table-column
                prop="status"
                :label="$t('table.status')"
                min-width="150"
            >
              <template slot-scope="{row}">
                <template v-if="row.status === -1">
                  <span class="font-red">{{row.statusStr}} <i class="el-icon-error"></i></span>
                </template>
                <template v-if="row.status === 0">
                  <span class="font-blue">{{row.statusStr}} <i class="el-icon-loading"></i></span>
                </template>
                <template v-if="row.status === 1">
                  <span class="font-blue">{{row.statusStr}} <template v-if="row.totalNum">{{row.currentNum}}/{{row.totalNum}}</template><i class="el-icon-loading"></i></span>
                </template>
                <template v-if="row.status === 2">
                  <span class="font-green">{{row.statusStr}} <i class="el-icon-success"></i></span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
                prop="result"
                :label="$t('stock.Processing results')"
                min-width="100"
            >
              <template slot-scope="{row}">
                <template v-if="row.resultPath && row.status === 2">
                  <a :href="row.resultPath" target="_blank" class="font-blue">处理结果</a>
                </template>
                <template v-else>
                  <template v-if="row.status === -1">
                    {{row.remark}}
                  </template>
                  <template v-else>
                    -
                  </template>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import request from "@/utils/request";
import {getHandleExcelList} from "@/api/excel";
import {deepCopy} from "@/utils";

export default {
  name: "ExportContainerCostBtn",
  data(){
    return {
      tableData: [],
      drawer: false,
      downloadLoading: false,
      uploadUrl: process.env.VUE_APP_BASE_API + '/finance/uploadContainerCostTemplate',
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      queryParams: {
        page: 1,
        pageSize: 100,
        type: 3,
      },
      loop: null,
    }
  },
  computed:{
    loopFlag(){
      const flag = this.tableData.some(item => item.status === 0 || item.status === 1);
      return flag && this.drawer
    }
  },
  watch:{
    loopFlag(newVal, oldVal){
      // 有数据发生变化 需求重新请求数据
      if(oldVal === true && newVal === false){
        this.$emit('changeData');
      }
    },
  },
  created() {
    this.getData()
    this.loop = setInterval(()=>{
      if(this.loopFlag){
        this.getData()
      }
    },1500);
  },
  methods: {
    getData(){
      this.getDrawerData()
    },
    showDrawer(){
      this.drawer = true
    },
    // 下载模板
    downloadTemplate(){
      this.downloadLoading = true
      request({
        url: '/finance/downloadContainerCostTemplate',
      })
        .then(res=>{
          this.downloadLoading = false
          window.open(res.data.excelPath,"_blank");
        })
    },
    uploadFileSuccess(res, file) {
      if (res.error === 0) {
        this.$successMessage(res.message)
        this.getData()
      } else {
        this.$errorMessage(res.message);
      }
    },
    beforeUpload(){
      return true
    },
    getDrawerData(){
      getHandleExcelList(this.queryParams)
          .then(res=>{
            this.tableData = deepCopy(res.data)
          })
    },

  },
  // 清除定时器
  beforeDestroy() {
    if (this.loop) {
      clearInterval(this.loop)
    }
  },
}
</script>

<style scoped lang="scss">
.drawer-box{
  padding: 20px;
  .template-tips{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
  }
}
</style>
